<template>
    <div class="blog-detail">
        <!-- 博客详情头 -->
        <van-row class="blog-detail-header">
            <!-- 标题 -->
            <p class="blog-detail-header-title">{{ blog.title }}</p>

            <!-- 博客信息 -->
            <van-row type="flex" align="center" class="blog-detail-header-info">
                <!-- 发表人头像 -->
                <img :src="avatarUrl" alt="avatar" />

                <!-- 发表人姓名 -->
                <span>{{ blog.nickname }}</span>

                <!-- 发表时间 -->
                <span>{{ blog.create_time | dateFormat }}</span>
            </van-row>
        </van-row>

        <!-- 博客内容 -->
        <p class="blog-detail-main">
            {{ blog.content }}
        </p>

        <van-divider dashed>评论列表</van-divider>

        <div class="blog-detail-footer">
            <van-row
                class="blog-detail-footer-header"
                type="flex"
                justify="space-between"
            >
                <span>评论({{ commentList.length }})</span>
                <a @click.prevent="commentAcVisible = true">发表评论</a>
            </van-row>

            <div class="comment-list">
                <!-- 列表的每一项 -->
                <van-row
                    class="comment-list-item"
                    :gutter="10"
                    v-for="item in commentList"
                    :key="item.id"
                >
                    <van-col class="comment-list-item-left" :span="3">
                        <img :src="avatarUrl" alt="avatar" />
                    </van-col>

                    <van-col :span="21">
                        <div class="comment-list-item-right">
                            <span>{{ item.nickname }}</span>
                            <p>
                                {{ item.content }}
                            </p>
                            <van-row type="flex" justify="space-between">
                                <span>{{ item.create_time | dateFormat }}</span>
                                <van-icon name="like-o" />
                            </van-row>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>

        <!-- 添加评论 -->
        <van-action-sheet
            v-model="commentAcVisible"
            title="添加评论"
            class="comment-ac"
            :round="false"
        >
            <!-- 输入框 -->
            <van-field
                v-model="comment"
                rows="2"
                autosize
                label="评论"
                label-width="30"
                type="textarea"
                maxlength="50"
                placeholder="请输入评论，不能包含非法信息..."
                show-word-limit
            />

            <!-- 添加按钮 -->
            <van-button type="primary" block @click="addComment"
                >添加</van-button
            >
        </van-action-sheet>
    </div>
</template>

<script>
import avatarUrl from "@/assets/avatar.jpeg";
export default {
    data() {
        return {
            blog: {},
            avatarUrl,
            commentAcVisible: false,
            comment: "",
            commentList: [],
        };
    },
    async created() {
        await this.getDetail();
        this.getCommentList();
    },
    methods: {
        async getDetail() {
            const bid = this.$route.params.bid;
            const res = await this.$http.get(`/blogs/${bid}`);
            this.blog = res.data;
        },
        async getCommentList() {
            const bid = this.blog.bid;
            const res = await this.$http.get(`/blogs/${bid}/comments`);
            this.commentList = res.data;
            console.log("this.commentList", this.commentList);
        },
        async addComment() {
            const bid = this.blog.bid;
            const content = this.comment;
            const res = await this.$http.post("/comments", { bid, content });
            if (res.code !== 201) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 发表成功
            this.$notify({
                type: "success",
                message: res.message,
            });
            // 关闭添加评论的 ActionSheet
            this.commentAcVisible = false;
            // 刷新评论列表
            this.getCommentList();
        },
    },
};
</script>

<style lang="less">
.blog-detail {
    height: 100%;

    &-header {
        padding: 5px 10px;

        &-title {
            margin: 0;
            line-height: 42px;
        }

        &-info {
            img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }

            span {
                font-size: 12px;
                margin: 0px 5px;
                color: #888;
            }
        }
    }

    &-main {
        padding: 0px 10px;
        line-height: 30px;
    }

    &-footer {
        padding: 0px 10px;

        &-header {
            color: #999;
            font-size: 14px;
        }

        .comment-list {
            margin-top: 10px;

            &-item {
                padding: 10px;
                border: 1px solid #999;

                &-left {
                    img {
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                    }
                }

                &-right {
                    display: flex;
                    flex-direction: column;

                    span {
                        color: #999;
                    }

                    p {
                        line-height: 24px;
                    }
                }
            }
        }
    }

    .comment-ac {
        .van-field {
            padding: 20px 10px;
        }
    }
}
</style>
